Frontend Forever App
We have a mobile app for you to download and use. And you can unlock many features in the app.
Get it now
Intall Later
Run
HTML
CSS
Javascript
Output
Document
@charset "UTF-8"; @import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800); *, :after, :before { box-sizing: border-box; padding: 0; margin: 0; } html, body { margin: 0; height: 100%; background: black; touch-action: none; }
console.log("Event Fired") import {Element3D, element, html, attribute, Index} from 'lume' import {signalify} from 'classy-solid' async function fetchPhotos() { const json = await fetch('https://picsum.photos/v2/list?page=2&limit=14').then(r => r.json()) // change the size to 100x100 json.forEach(photo => { const parts = photo.download_url.split('/') parts.pop() parts.pop() parts.push(100) photo.download_url = parts.join('/') }) console.log('photos:', json.map(photo => photo.download_url)) return json.map(photo => photo.download_url) } const photos = await fetchPhotos() element('my-photos')(class extends Element3D { template = () => html`
${photos.map((photo, i) => html`
`)}
` }) element('carousel-layout')(class extends Element3D { static observedAttributes = { radius: attribute.string(), } radius = 200 hasShadow = true childrenSignal = [] constructor() { super() signalify(this, 'childrenSignal') } connectedCallback() { super.connectedCallback() this.createEffect(() => { console.log('children length: ', this.childrenSignal.length) let i = -1 for (const child of this.childrenSignal) { i++ child.slot = "slot" + i } }) } #queued = false childConnectedCallback(...args) { super.childConnectedCallback(...args) if (this.#queued) return this.#queued = true // return requestAnimationFrame(() => { console.log('handle children', this.children) this.#queued = false this.childrenSignal = Array.from(this.children) }) } template = () => html` <${Index} each=${() => this.childrenSignal}> ${(_, index) => html`
[0, (360 / this.childrenSignal.length) * index]}>
[0, 0, this.radius]} mount-point="0.5 0.5">
"slot" + index}>
`} > ` })